<template>
  <view class="fu-search">
    <!-- 搜索框主体 -->
    <view 
      class="fu-search__content"
      :class="{
        'fu-search__content--round': round,
        'fu-search__content--focus': focused
      }"
      :style="{ background: background }"
    >
      <!-- 搜索图标 -->
      <view class="fu-search__icon">
        <fu-icon name="search" />
      </view>
      
      <!-- 输入框 -->
      <input
        class="fu-search__input"
        :value="modelValue"
        :placeholder="placeholder"
        :placeholder-style="placeholderStyle"
        :disabled="disabled"
        :maxlength="maxlength"
        :focus="focus"
        :confirm-type="confirmType"
        @input="onInput"
        @focus="onFocus"
        @blur="onBlur"
        @confirm="onConfirm"
      />
      
      <!-- 清除按钮 -->
      <view 
        v-if="clearable && modelValue && focused"
        class="fu-search__clear"
        @click="onClear"
      >
        <fu-icon name="close" size="32" />
      </view>
    </view>
    
    <!-- 取消按钮 -->
    <view 
      v-if="showAction && focused"
      class="fu-search__action"
      @click="onCancel"
    >
      <slot name="action">
        <text>取消</text>
      </slot>
    </view>
  </view>
</template>

<script>
/**
 * fu-search 搜索组件
 * @description 搜索组件，用于搜索场景
 * @property {String} modelValue - 输入框内容
 * @property {String} placeholder - 输入框占位文本
 * @property {String} placeholderStyle - 占位文本样式
 * @property {String} background - 搜索框背景色
 * @property {Boolean} focus - 是否自动聚焦
 * @property {Boolean} disabled - 是否禁用
 * @property {Boolean} readonly - 是否只读
 * @property {Boolean} clearable - 是否可清除
 * @property {Boolean} showAction - 是否显示取消按钮
 * @property {Boolean} round - 是否圆角
 * @property {Number} maxlength - 最大输入长度
 * @property {String} confirmType - 键盘确认按钮文字
 * @event {Function} update:modelValue - 输入内容更新时触发
 * @event {Function} search - 确认搜索时触发
 * @event {Function} clear - 清除内容时触发
 * @event {Function} cancel - 点击取消时触发
 * @event {Function} focus - 输入框聚焦时触发
 * @event {Function} blur - 输入框失焦时触发
 */
export default {
  name: 'fu-search',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入搜索关键词'
    },
    placeholderStyle: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: '#f7f8fa'
    },
    focus: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    showAction: {
      type: Boolean,
      default: true
    },
    round: {
      type: Boolean,
      default: true
    },
    maxlength: {
      type: Number,
      default: -1
    },
    confirmType: {
      type: String,
      default: 'search'
    }
  },
  emits: ['update:modelValue', 'search', 'clear', 'cancel', 'focus', 'blur'],
  data() {
    return {
      focused: false
    }
  },
  methods: {
    onInput(e) {
      const value = e.detail.value
      this.$emit('update:modelValue', value)
      this.$emit('change', value)
    },
    onFocus(event) {
      this.focused = true
      this.$emit('focus', event)
    },
    onBlur(event) {
      this.focused = false
      this.$emit('blur', event)
    },
    onClear() {
      this.$emit('update:modelValue', '')
      this.$emit('clear')
    },
    onCancel() {
      this.onBlur()
      this.$emit('cancel')
    },
    onConfirm(event) {
      this.$emit('search', this.modelValue)
      uni.$emit('search', this.modelValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-search {
  display: flex;
  align-items: center;
  padding: 20rpx 32rpx;
  box-sizing: border-box;
  
  &__content {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    height: 64rpx;
    background: #f7f8fa;
    border-radius: 8rpx;
    
    &--round {
      border-radius: 32rpx;
    }
    
    &--focus {
      .fu-search__input {
        &::placeholder {
          opacity: 0.4;
        }
      }
    }
  }
  
  &__icon {
    font-size: 32rpx;
    color: var(--fu-text-color-secondary);
    margin-right: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40rpx;
    height: 40rpx;
    
    .fu-icon {
      font-family: 'fuIcon';
      font-size: 36rpx;
    }
  }
  
  &__input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    background: transparent;
    border: none;
    
    &::placeholder {
      color: var(--fu-text-color-secondary);
      transition: opacity 0.2s;
    }
  }
  
  &__clear {
    font-size: 32rpx;
    color: var(--fu-text-color-secondary);
    margin-left: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40rpx;
    height: 40rpx;
    
    .fu-icon {
      font-family: 'fuIcon';
      font-size: 24rpx;
    }
    
    &:active {
      opacity: 0.7;
    }
  }
  
  &__action {
    padding-left: 24rpx;
    font-size: 28rpx;
    color: var(--fu-text-color);
    line-height: 64rpx;
    
    &:active {
      opacity: 0.7;
    }
  }
}
</style> 